{% set clazz = "home" %}
{% set title = "积分商城" %}
{% extends './modules/common/templates/main.html' %}
{% block style %}
  <link rel="stylesheet" type="text/css" href="{{ '/static/css/integral.css'|version }}" />
{% endblock %}
{% block content %}
  {% if !nested %}
    <header class="bar bar-header">
      {{ macro.back() }}
      <h1 class="title">{{ title }}</h1>
    </header>
  {% endif %}
  <section>
    <div class="vspace hspace round" ui-mode="20px">
      <a class="banner autofix" href="/integral/packages">
        <img src="http://7xjyap.com2.z0.glb.qiniucdn.com/image-030851c3-1c2d-4a45-9266-7016f5a23bf6.jpg" />
      </a>
      <div class="flexbox menus">
        <a class="item" href="/integral/records">
          <img class="center-block" src="http://7xjyap.com2.z0.glb.qiniucdn.com/image-9ebded27-50cb-4008-986d-995de3b162bc.png" />
          <span>{{ integral.available|default(0) }}积分</span>
        </a>
        <a class="item" href="/integral/protocol">
          <img class="center-block" src="http://7xjyap.com2.z0.glb.qiniucdn.com/image-33367e9b-664f-461e-a7f8-5282075c3cdd.png" />
          <span>积分规则</span>
        </a>
        <a class="item" href="/integral/orders">
          <img class="center-block" src="http://7xjyap.com2.z0.glb.qiniucdn.com/image-c16e680f-73c8-440f-b685-75a08eb6e845.png" />
          <span>兑换记录</span>
        </a>
      </div>
    </div>
    <div class="showcases">
      <div class="header">
        <h3 class="title">热门兑换</h3>
        <a href="/integral/goods" class="pull-right text-sm text-right text-gray">更多<i class="icon">&#xe61a;</i></a>
      </div>
      <div class="content">
        {% for item in goods.list %}
          <a class="item" href="/integral/details/{{ item.id }}">
            <div class="panel round">
              <div class="vspace hspace" ui-mode="20px">
                <div class="autofix figure">
                  <img src="{{ item.coverImg|thumb(305, 305) }}" />
                </div>
                {% if item.isFinished %}
                  <img class="sellout" src="http://7xjyap.com2.z0.glb.qiniucdn.com/image-e23b028d-83f4-42d2-867b-f7a1a1f7fe8f.png" />
                {% endif %}
              </div>
              <div class="text">
                <h4 class="name text-ellipsis">{{ item.goodsName }}</h4>
                <small class="brief">
                积分：<i class="split text-orange">{{ item.consumeIntegral }}</i>
              </div>
            </div>
          </a>
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock %}
{% block script %}
  {% parent %}
  <script src="{{ '/static/js/integral.js'|version }}"></script>
{% endblock %}